import { useEffect, useState } from 'react';

import { useMetaTag } from '@/shared/lib/hooks';
import { Button, ButtonVariants, Loader, Tag } from '@/shared/ui';

import { ISelectedPool } from '../../lib/useFilters';
import cs from './FilterModal.module.scss';

export const FilterModal = ({
  formats,
  topics,
  handleSaveNewFilters,
  selectedFilters,
}: {
  formats?: ISelectedPool[];
  topics?: ISelectedPool[];
  handleSaveNewFilters: (items: ISelectedPool[]) => void;
  selectedFilters: ISelectedPool[];
}) => {
  const [tempSelectedFilters, setTempSelectedFilters] = useState<ISelectedPool[]>(selectedFilters);
  const [meta, setMeta] = useState<boolean>(false);

  const handleSelectFilters = (filter: ISelectedPool) => {
    if (tempSelectedFilters.find((item) => item.id + item.arr === filter.id + filter.arr)) {
      setTempSelectedFilters((_selected) => _selected.filter((item) => item.id + item.arr !== filter.id + filter.arr));
      return;
    }
    setTempSelectedFilters((_selected) => [..._selected, filter]);
  };

  const handleAccept = () => {
    handleSaveNewFilters(tempSelectedFilters);
  };

  useEffect(() => {
    setMeta(true);

    return () => {
      setMeta(false);
    };
  }, []);

  useMetaTag(meta, '#999999');

  return (
    <div className={cs.filters_container}>
      <h2 className={cs.title}>Фильтры</h2>
      <div className={cs.filters}>
        <div className={cs.filter}>
          <h3 className={cs.filter_title}>Формат</h3>
          <div className={cs.values}>
            {formats?.length ? (
              formats.map((tag) => (
                <Tag
                  data-testid={`filter-format-tag-${tag.title}`}
                  isSelected={!!tempSelectedFilters.find((i) => i.id + i.arr === tag.id + tag.arr)}
                  key={tag.id}
                  onClick={() => handleSelectFilters({ ...tag, arr: 'formats' })}
                  tag={tag.title}
                />
              ))
            ) : (
              <Loader borderRadius={1000} height={36} />
            )}
          </div>
        </div>
        <div className={cs.filter}>
          <h3 className={cs.filter_title}>Тема</h3>
          <div className={cs.values}>
            {topics?.length ? (
              topics.map((tag) => (
                <Tag
                  data-testid={`filter-topic-tag-${tag.title}`}
                  isSelected={!!tempSelectedFilters.find((i) => i.id + i.arr === tag.id + tag.arr)}
                  key={tag.id}
                  onClick={() => handleSelectFilters({ ...tag, arr: 'topics' })}
                  tag={tag.title}
                />
              ))
            ) : (
              <Loader borderRadius={1000} height={36} />
            )}
          </div>
        </div>
      </div>

      <div className={cs.action}>
        <Button
          className={cs.accept}
          data-testid="button-submit_changes"
          onClick={handleAccept}
          variant={ButtonVariants.Primary}
        >
          Применить
        </Button>
      </div>
    </div>
  );
};
